<template>
	<view class="myPage" :style="{ background: pageBg, backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
        <view class="navbarBox">
            <u-status-bar></u-status-bar>
            <!-- 自定义导航栏 -->
            <view class="custom-navbar">
                <view class="pageTitle">个人中心</view>
            </view>
        </view>
        
		<view class="header" @tap="toLogin">
            <view v-if="islogin" class="userInfo" @tap="toUserInfo">
                <u-avatar :src="userinfo.avatar" size="128rpx"/>
                <view class="nickNameBox">
                    <view class="nickName">
                        {{userinfo.nickname || '未设置昵称'}}
                    </view>
                    <view class="phone-number">ID:{{userinfo.id || 1111}}</view>
                </view>
            </view>
            <view v-else class="toLigonBox">
                <u-avatar size="128rpx"/>
                <view class="toLigon">请先登录~</view>
            </view>
		</view>

        <view class="myOrderBox">
            <view class="allOrderBox">
                <text class="myOrder">我的订单</text>
                <view class="allOrder" @tap="toMyOrder(0)">
                    全部订单
                    <u-icon name="arrow-right" />
                </view>
            </view>
            
            <view class="orderTypeBox">
                <view
                    class="orderTypeItem"
                    v-for="(item, index) in orderListData"
                    :key="index"
                    @tap="toMyOrder(index)"
                >
                    <image class="itemIcon" :src="item.img" mode="heightFix" />
                    <text class="itemTitle">{{item.title}}</text>
                    <view v-if="item.num" class="num">{{item.num}}</view>
                </view>
            </view>
        </view>

		<view class="list-content">
            <view class="listTitle">快捷操作</view>
            <u-cell-group :customStyle="{margin: '0 30rpx'}" :border="false">
                <u-cell title="优惠券" isLink :titleStyle="titleStyle" @tap="toCoupon">
                    <image slot="icon" class="cellIcon" src="/static/img/my_yhq.png" mode="widthFix" />
                </u-cell>
                <u-cell title="我的钱包" isLink :titleStyle="titleStyle" @tap="toWallet">
                    <image slot="icon" class="cellIcon" src="/static/img/my_wdqb.png" mode="widthFix" />
                </u-cell>
                <u-cell title="联系客服" isLink :titleStyle="titleStyle" @tap="customerService">
                    <image slot="icon" class="cellIcon" src="/static/img/my_lxkf.png" mode="widthFix" />
                </u-cell>
                <u-cell title="用户协议" isLink :titleStyle="titleStyle" @tap="toAgreement">
                    <image slot="icon" class="cellIcon" src="/static/img/my_yhxy.png" mode="widthFix" />
                </u-cell>
                <u-cell title="隐私政策" isLink :titleStyle="titleStyle" :border="false" @tap="toPolicy">
                    <image slot="icon" class="cellIcon" src="/static/img/my_yszc.png" mode="widthFix" />
                </u-cell>
            </u-cell-group>
		</view>
        <customerService :show.sync="showCustomerService" />
	</view>
</template>

<script>
    import { customerService } from '@/components/customerService.vue'
	import {
		setUserInfo,
		getUserInfo,
		setToken,
		getToken,
		removeUserInfo,
		removeToken
	} from '@/utils/auth';
	export default {
        components: {
            customerService
        },
		data() {
			return {
                pageBg: '',
                
				userinfo: {},
				islogin: true,
                
                orderListData: [{
                    title: '全部订单',
                    img: '/static/img/orderType_1.png',
                    num: 0
                },{
                    title: '待支付',
                    img: '/static/img/orderType_2.png',
                    num: 1
                },{
                    title: '已支付',
                    img: '/static/img/orderType_3.png',
                    num: 2
                },{
                    title: '待收货',
                    img: '/static/img/orderType_4.png',
                    num: 3
                },{
                    title: '已完成',
                    img: '/static/img/orderType_5.png',
                    num: 4
                }],
                
                // 快捷按钮样式
                titleStyle: {
                    color: '#333333',
                    fontSize: '30rpx'
                },
                
                showCustomerService: false,
			}
		},
        async created() {
            try {
                this.pageBg = `url(${await this.toBase64('/static/img/myBg.png')}) #F5F5F5`;
            } catch (err) {
                console.error('读取文件失败:', err);
            }
        },
		onShow() {
			console.log(getUserInfo())
			if(getUserInfo()!=undefined){
				this.islogin = true
			}
			this.userinfo = getUserInfo() || {};
		},
		methods: {
			toLogin() {
                if (this.islogin) {
                    uni.navigateTo({
                        url: "/pages/userinfo/userinfo"
                    })
                } else{
                    this.login()
                }
			},
            // 跳转订单页面
            toMyOrder(index) {
                uni.navigateTo({
                    url: '/pages/order/order?status=' + index
                })
            },
            
            // 跳转优惠券页面
            toCoupon() {
                uni.navigateTo({
                    url: '/pages/coupon/coupon'
                })
            },
            // 我的钱包
            toWallet() {
                uni.navigateTo({
                    url: '/pages/wallet/wallet'
                })
            },
            // 联系客服
			customerService() {
				this.showCustomerService = true
			},
            // 用户协议
            toAgreement() {
                uni.navigateTo({
                    url: '/pages/agreement/agreement'
                })
            },
            // 隐私政策
            toPolicy() {
                uni.navigateTo({
                    url: '/pages/policy/policy'
                })
            },
			loginOut() {
				uni.showModal({
					title: '注销登录提示',
					content: '确定要注销登录吗？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					confirmColor: '#f55850',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
							uni.$u.toast("注销登录成功，欢迎再来")
							removeUserInfo()
							removeToken()
							this.islogin=false
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.myPage {
        min-height: 100vh;
		font-size: 28rpx;
        
        .navbarBox {
            .custom-navbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20rpx;
                height: 44px;
                background-color: transparent;
                color: $uni-text-color-inverse;
                .pageTitle {
                    font-size: 32rpx;
                    font-weight: bold;
                    text-align: center;
                    flex: 1;
                }
            }
        }
        
        .header {
            margin: 30rpx;
            color: $uni-text-color-inverse;
            font-weight: 500;
            font-size: 36rpx;
        
        	.userInfo {
                display: flex;
                align-items: center;
                .nickNameBox {
                    margin-left: 33rpx;
                    .nickName {
                        
                    }
                    .phone-number {
                        
                    }
                }
        	}
            
            .toLigonBox {
                display: flex;
                align-items: center;
                .toLigon {
                    margin-left: 33rpx;
                }
            }
        }
	
        .myOrderBox {
            margin: 30rpx;
            padding: 30rpx;
            background-color: $uni-bg-color;
            border-radius: 24rpx;
            
            .allOrderBox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .myOrder {
                    font-size: 32rpx;
                    color: $uni-text-color;
                }
                .allOrder {
                    display: flex;
                    align-items: center;
                    font-size: 26rpx;
                    color: $uni-text-color-grey-6;
                }
            }
            
            .orderTypeBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .orderTypeItem {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;
                    .num {
                        position: absolute;
                        top: 15rpx;
                        right: 0;
                        width: 35rpx;
                        height: 35rpx;
                        line-height: 35rpx;
                        text-align: center;
                        border-radius: 50%;
                        color: $uni-text-color-inverse;
                        background: $uni-bg-color-addNum-bg;
                    }
                    .itemIcon {
                        margin: 30rpx 0 10rpx;
                        height: 62rpx;
                    }
                    .itemTitle {
                        font-size: 28rpx;
                        color: $uni-text-color-grey-6;
                    }
                }
            }
        }
    
        .list-content {
            margin: 30rpx;
            background: #fff;
            border-radius: 24rpx;
            .listTitle {
                padding: 30rpx 30rpx 0;
                font-size: 36rpx;
                color: $uni-text-color;
            }
            
            .cellIcon {
                width: 48rpx;
                margin-right: 20rpx;
            }
            .u-cell__body {
                padding: 30rpx 30rpx 30rpx 0;
            }
        }
    }
</style>